<template>
  <div ref="appWindow" :data-pid="option.pid" :class="`appwindow ${active?'appwindow-active':''}`" :style="boxStyle">
    <!-- 窗口按钮 -->
    <ul class="appwindow-bar h7" @mousedown.stop="">
      <li @click.stop="disableAppWindow"><i class="icon iconfont iconsub"></i></li>
      <li @click.stop="setWindowSizeType('max')" v-show="windowSizeType === 'initial'"><i
          class=" h7 icon iconfont iconwindow  h7"></i></li>
      <li @click.stop="setWindowSizeType('initial')" v-show="windowSizeType === 'max'"><i
          class="icon iconfont icon-chuangkou-huanyuan"></i></li>
      <li @click.stop="$store.commit('closeApp', index)"><i class="icon iconfont iconguanbi"></i></li>
    </ul>

    <!-- 主体内容 -->
    <section class="appwindow-body">
      <component v-if="appPage" :is="appPage"></component>
    </section>
  </div>
</template>

<script>
  export default {
    name: "AppWindow",
    components: {},
    provide() {
      return {
        appWindow: this,
      };
    },
    props: {
      // 应用配置
      option: {
        type: Object,
        default: null
      },
      // 当前窗口索引
      index: {
        type: Number,
        default: null
      },
      // 是否是活动窗口
      active: {
        type: Boolean,
        default: false
      },
      // false 正常 true 最小化
      windowSizeType: 'initial',
    },
    data() {
      return {
        // 坐标
        x: 0,
        y: 0,
        // 尺寸
        windowWidth: 300,
        windowHight: 300,
        // 知否最大化
        windowSizeType: 'initial', // max
        // 是否激活，决定z-index和边框
        active: true,
        // 外壳样式
        boxStyle: {}
      }
    },
    beforeCreate() {
      // 1. 确定x, y坐标
    },
    mounted() {
    },
    methods: {
      // 设置窗口尺寸类型
      setWindowSizeType(type) {
        this.$store.commit('windowSizeType', {index: this.index, type});
      },
      // 隐藏该应用窗口
      disableAppWindow() {
        this.$store.commit('hideOrShowApp', {index: this.index, show: false});
        this.$emit('setActiveAppIndex', -1);
      },
      // 设置样式
      setBoxStyle(style) {
        this.boxStyle = style;
      }
    },
    computed: {
      appPage() {
        return this.$router.appPages[this.option.type]();
      }
    },
    watch: {
      active(newVal) {
        if (newVal) {
          this.$store.commit('hideOrShowApp', {index: this.index, show: true});
        }
      }
    }
  }
</script>

<style>
  /* 公用 */
  .appwindow {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--color_gray1);
    border-top: 0;
    background: #fff;
  }

  .appwindow-active {
    border: 2px solid #fff;
    border-top: 0;
  }

  .appwindow-bar {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    flex-direction: row;
    width: auto;
    height: 25px;
    line-height: 25px;
    color: black;

    & li {
      display: block;
      width: 30px;
      line-height: 25px;
      text-align: center;
      cursor: pointer;
    }

    & li:hover {
      background-color: var(--color_gray1);;
    }

    & li:active {
      background-color: var(--color_gray2);
    }
  }

  /* 用于子组件（应用）*/
  /* 头部 */
  .appheader {
    display: flex;
    align-items: center;
    width: 100%;
    height: 25px;

    & .header-icon {
      margin: 0 10px;
      width: 20px;
      height: 20px;
    }

    & .title {
      flex: 1;
      width: 0;
      line-height: 20px;
      height: 20px;
    }
  }

  .appwindow-body {
    width: 100%;
    height: 100%;
    cursor: default;
  }
</style>
<style>


</style>